<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '../stores'

const router = useRouter()
const userInfo = useUserStore()

const userMenuItems = ref([
    {
        label: "用户中心",
        link: "/user",
    }
])

const handleCommand = cmd => {
    console.log(cmd)
    router.push(cmd)
}
</script>

<template>
    <div v-if="userInfo.id === 0" class="user-badget-no-content">
        <el-button round @click="router.push('/login')">登录/注册</el-button>
    </div>
    <div v-if="userInfo.id !== 0" class="user-badget-container">
        <el-avatar :size="25" :src="userInfo.avatar"></el-avatar>

        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="margin-left: 10px;">
                {{ userInfo.name }}
                <el-icon>
                    <arrow-down />
                </el-icon>
            </span>

            <template #dropdown>
                <el-dropdown-menu v-for="item in userMenuItems">
                    <el-dropdown-item :command="item.link">{{ item.label }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: black;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.user-badget-container {
    display: inline-flex;
    align-items: center;
    background-color: white;
    padding: 2px;
    border: 2px solid black;
    border-radius: 20px;
}
</style>